<template>
	<view class="all">
	
	<view class="search">
		 <view class="databox">
		 		<view class="data">
		 		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		 			<view class="uni-input">{{ date }}</view>
		 		</picker>
		 	</view>
		 	<view class="line">--</view>
		 	<view class="data">
		 		<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
		 			<view class="uni-input">{{ date1 }}</view>
		 		</picker>
		 	</view>
		 </view>
	<view class="queren" @tap="search">查询</view>	
	</view>
			<view class="item" v-for="(item,index) in chaodingdan" :key="index">
			<view class="shoutxinxi">
				<view class="itemtop">
					<view class="left">
						<image :src="item['logo_url']"></image>
					</view>
					<view class="middle">
						订单金额
						<text>{{item['order_amount']}}</text>
					</view>
					<view class="right red">已超时</view>
				</view>
				<view class="itembottom">
					<view class="left">
						<view>商户号 {{item['order_no']}}</view>
						<view>订单流水号 {{item['transaction_id']}}</view>
						<view>创建时间 {{item['take_time']}}</view>
					</view>
						<view class="right" @tap="slide(index)" v-if="tabindex == index">
						<text>收起</text>
						 <image  mode="widthFix" src="../../../static/images/icon/xia.png"></image>
					</view>
					<view class="right" @tap="slide(index)" v-else>
						<text>详情</text>
						 <image class="you" mode="widthFix" src="../../../static/images/icon/you.png"></image>
					</view>
				</view>
			</view>
			<view class="showbox" v-if="tabindex == index">
				<view class="item">
					<view>账户类型</view>
					<view>{{item['ploat_name']}}</view>
				</view>
				<view class="item">
					<view>账号</view>
					<view>{{item['account']}}</view>
				</view>
				<view class="item">
					<view>昵称</view>
					<view>{{item['nickname']}}</view>
				</view>
				
				<!-- <view class="item">
					<view>完成时间</view>
					<view>{{item['success_time']}}</view>
				</view> -->
			</view>
			<view class="btn" @click="shou(item)" v-if="tabindex == index">确认收款</view>
			
		</view>
	</view>
</template>

<script>
			import { mapState } from 'vuex';
	export default {
		data() {
			return {
				tabindex: -1,
				flag: false,
				account: '',
				amount: '',
				date: '开始时间',
				date1: '结束时间',
				}
			},
				props: {
				current: {
					type: Number,
					default: 0
				}
			},
		
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value;
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value;
			},
				tijiao() {
				if (this.amount) {
					var data = {
						token: uni.getStorageSync('token'),
						order_id:this.account.order_id,
						order_amount:this.amount
					}
					this.$store.dispatch('confirmreceitp', data)
					.then(res=>{
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
						if(res.data.code==1){
							this.amount = "";
							this.tabindex = -1;
						var data = {
							token: uni.getStorageSync('token'),
							type:3
						};
						this.$store.dispatch('chaodingdan', data);
							this.flag = false;
						}
					})
				}
				else{
					uni.showToast({
						title: '请输入收款金额',
						icon: "none"
					})
				}
			},
				search() {
				if (this.date != "选择开始日期时间" && this.date1 != "选择结束日期时间") {
					var data = {
						token: uni.getStorageSync('token'),
						type: 3,
						startTime: this.date,
						endTime: this.date1,
					};
					this.$store.dispatch('chaodingdan', data)
					.then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					})
			
				}
					else{
						uni.showToast({
							title: '请选择开始和结束日期',
							icon: "none"
						})
					}
			},
		slide(item) {
			if(this.tabindex ==item){
				this.tabindex = -1;
			}
			else{
				this.tabindex = item;
			}
		},
		shou(item) {
			var data={
				flag:true,
				account:item,
				type:'chaoshi'
			}
			// this.flag = true;
			// this.account = item;
			this.$bus.$emit("shoun",data)
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
		},
		onLoad() {
			
				
		},
			watch: {
			current(newName, oldName) {
				if (newName == 2) {
					var data = {
						token: uni.getStorageSync('token'),
						type:3
					};
					this.$store.dispatch('chaodingdan', data);
				}
			},
			
		},
			mounted(){
			 this.$bus.$on('csorder', data => {
				 var data = {
				 	token: uni.getStorageSync('token'),
				 	type:3,
				 	startTime: this.date,
				 	endTime: this.date1,
				 };
				 this.$store.dispatch('chaodingdan', data)
			 })
		},
			computed: {
			...mapState([
				"chaodingdan",
			]),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		
		},
	}
</script>

<style lang="scss" scoped src="./index.scss"></style>
